<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<!--百度jQueryCDN-->
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			//标签选择器
			$("#btn1").click(function() {
				$("div").css('background-color', 'red');
			});

			//类选择器
			$("#btn2").click(function() {
				$(".divClass").css("background-color","green");
			});

			//ID选择器
			$("#btn3").click(function() {
				$("#divId").css('background-color', 'blue');
			});

			//自类选择器
			$("#btn4").click(function() {
				$("body>div").css('background-color', 'orange');
			});

			//属性选择器
			$("#btn5").click(function() {
				$("div[data=myData]").css('background-color', 'pink');
			});
		});
	</script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		div {
			width: 100%;
			height:50px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div data="myData"></div>
	<div class="divClass"></div>
	<div class="divClass"></div>
	<div class="divClass"></div>
	<div id="divId"></div>
	<button id="btn1">标签选择器</button>
	<button id="btn2">类选择器</button>
	<button id="btn3">ID选择器</button>
	<button id="btn4">子类选择器</button>
	<button id="btn5">属性选择器</button>
</body>
</html>